<template>
	<div>pageX: {{ x }} pageY:{{ y }}</div>
	<div style="height: 300px">
		<h1 v-if="loading">loading...</h1>
		<img v-if="!loading && result" :src="result.message" alt="" />
	</div>
	<div>{{ todoResult?.title }}</div>
	<div>
		<ProvideInjectDemo />
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useMousePosition from '../hooks/useMousePosition'
import useURLLoader from '../hooks/useURLLoader'
import ProvideInjectDemo from './ProvideInjectDemo.vue'

interface DogResult {
	message: string
	status: string
}

interface TodoResult {
	title: string
}

export default defineComponent({
	name: 'CompositionAPIDemo',
	components: { ProvideInjectDemo },
	setup() {
		const { x, y } = useMousePosition()
		const { loading, result } = useURLLoader<DogResult>(
			'https://dog.ceo/api/breeds/image/random'
		)

		const { result: todoResult } = useURLLoader<TodoResult>(
			'https://jsonplaceholder.typicode.com/todos/1'
		)

		return { x, y, loading, result, todoResult }
	}
})
</script>
<style lang="scss" scoped></style>
